import React, { Component } from 'react';
import Head from 'next/head';
import { connect } from 'react-redux'
import {Card,message,Row,Col,Radio} from 'antd';
import './index.less'
import auth from '../../lib/auth'
import MyLayout from '../../components/layout';
import * as API from '../../api/api'
// import user from '../../store/reducers/user';
import {getJwt} from '../../lib/auth'
import {updateInfo} from '../../store/user/action'
const RadioGroup = Radio.Group;
function beforeUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('请上传小于2M的图片');
    }
    return isLt2M;
}

function mapStateToProps (state) {
    return {
        
    }
}
function mapDispatchToProps(dispatch) {
    return {
        updateInfo:  (payload) => {dispatch(updateInfo(payload))},
    }
}
@connect(mapStateToProps,mapDispatchToProps)
export default class extends Component {
    static async getInitialProps (ctx) {
        auth(ctx)
        let {req} = ctx;
        let token = getJwt({req});
        let res = await API.getUserInfo({token});
        let userInfo = res.data.data;
        return {...userInfo}
    }
    constructor(props) {
        super(props);
        this.state = {
            username:'',
            avatar:'',
            email:'',
            gender:'',
            signature:'',
            website:''
        }

    }
    componentWillMount() {
        let {username,avatar,email,gender,signature,website} = this.props;
        this.setState({
            username,
            avatar,
            email,
            gender,
            signature,
            website
        })
    }   
    componentWillUnmount() {
       
    }
    //更新用户信息
    updateUserInfo(info={}){
        API.updateUserInfo(info).then(res=>{
            if (res.data.code === 1) {
                this.props.updateInfo({
                    username:info.username
                })
               message.success(res.data.message)
            }
        })
    }
    //更新用户头像
    updateAvatar = (e) => {
        var file = e.target.files[0]
        if (beforeUpload(file)) {
            var formData = new FormData();
            formData.append('avatar', file);
            // this.setState({ loading: true });
            API.updateAvatar(formData).then(res => {
                if (res.data.code === 1) {
                    let {url} = res.data;
                    // let userInfo = { ...this.state.userInfo, avatar: res.data.url };
                    // this.props.set_avatar(res.data.url)
                    this.setState({
                        avatar:url
                    })
                    this.props.updateInfo({
                        avatar:url
                    })
                    message.success('头像更新成功');
                } else {
                    message.error(res.data.message);
                }
            })
        }
    }
    handleInputChange=(e)=>{
        var newState = {};
        newState[e.target.name]=e.target.value;
        this.setState(newState);
    }
    onGenderChange=(e)=>{
        this.setState({
            gender:e.target.value
        });
    }
    doUpdateBasic=(e)=>{
        let {username,email} = this.state;
        this.updateUserInfo({
            username,
            email
        })
    }
    doUpdateProfile=(e)=>{
        let {gender,signature,website} = this.state;
        this.updateUserInfo({
            gender,
            signature,
            website
        })
    }
    triggerClick=()=> {
        this.refs.file.click()
    }
    render() {
        let {username,avatar,email,gender,signature,website} = this.state;
        return (
            <MyLayout showBg={false}>
                <div className="container">
                    <div className="view">
                        <Card title="基础设置" style={{ marginBottom: 24 }} bordered={false}>
                            <div className="userInfo-wrapper">
                                <Row gutter={16}>
                                    <Col md={6}>
                                        <div className="userInfo-setting-item">
                                            <div className="upload-avatar-box">
                                                <div className="upload-avatar">
                                                    <img className="user-avatar" src={avatar} />
                                                    <input type="file" ref="file" accept="image/*" onChange={(e) => { this.updateAvatar(e) }}/>
                                                    {/* <div className="upload_loading">
                                                        <Icon type='loading' />
                                                    </div> */}
                                                
                                                </div>    
                                                <button className="btn" onClick={this.triggerClick}>上传头像</button>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col md={12}>
                                        <div className="userInfo-setting-item">
                                            <div className="item">
                                                <label className="form-label">昵称</label>
                                                <input name="username" onChange={this.handleInputChange} value={username} type="text" placeholder="请输入昵称"  />
                                            </div>
                                            <div className="item">
                                                <label className="form-label">邮箱</label>
                                                <input name="email" onChange={this.handleInputChange} value={email} type="email" placeholder="请输入邮箱" />
                                            </div>
                                            <div className="item">
                                                <button className="btn" onClick={this.doUpdateBasic}>保存</button>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col md={6}>
                                        <div className="userInfo-setting-item">
                                        </div>
                                    </Col>
                                </Row>
                                
                            </div>
                        </Card>
                        <Card title="个人资料" style={{ marginBottom: 24 }} bordered={false}>
                            <div className="userInfo-wrapper">
                                <Row gutter={16}>
                                    <Col md={6}>
                                        
                                    </Col>
                                    <Col md={12}>
                                        <div className="userInfo-setting-item">
                                            <div className="item">
                                                <label className="form-label">性别</label>
                                                <RadioGroup onChange={this.onGenderChange} value={gender}>
                                                    <Radio value={1}>男</Radio>
                                                    <Radio value={0}>女</Radio>
                                                    <Radio value={2}>保密</Radio>
                                                </RadioGroup>
                                            </div>
                                            <div className="item" style={{height:"165px"}}>
                                                <label className="form-label">个人简介</label>
                                                <textarea name="signature" value={signature} onChange={this.handleInputChange} className="textarea" placeholder="填写你的个人简介" ></textarea>
                                            </div>
                                            <div className="item" >
                                                <label className="form-label">个人网站</label>
                                                <input name="website" value={website} onChange={this.handleInputChange} type="text" placeholder="请输入个人网站" />
                                            </div>
                                            <div className="item">
                                                <button className="btn" onClick={this.doUpdateProfile}>保存</button>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col md={6}>
                                        <div className="userInfo-setting-item">
                                        </div>
                                    </Col>
                                </Row>
                                
                            </div>
                        </Card>
                    </div>
                </div>
            </MyLayout>
        );
    }
}
